import { useEffect, useRef, useState } from 'react'
import Loading from '../loading'
import { colorHex } from '../util/Utils'
import './style.less'

function ColorPicker(props){
    let {px = 255, onChange} = props
    let picker = useRef(null) // 选择器
    let color = useRef(null) // 选择器
    let alpha = useRef(null) // 选择器
    let [move, setMove] = useState(false)// 是否选取状态
    let [position, setPosition] = useState([0, 0])
    let [rgba, setRgba] =useState([0,0,0,0]) // RGBA
    let [hex, setHex] = useState('')
    let [rgbMax, setRgbMax] = useState([255,255,255])
    let [aMove, setAmove] = useState(false)
    let [cMove, setCmove] = useState(false)
    let [cLeft, setcLeft] = useState(0)
    useEffect(()=>{
        document.body.onmouseup = ()=>{
            setMove(false)
            setAmove(false)
            setCmove(false)
        }
        return ()=>{
            document.body.onmouseup = null
        }
    },[])
    useEffect(()=>{
        // console.log(position)
        //注意：坐标原点为左上角
        
        // console.log((rgbMax[0]/px) * (px*position[1].toFixed(2)))
        let r = - ((rgbMax[0]/px) * (px*position[1].toFixed(2)) - 255)
        let g = r - (rgbMax[1]/px) * (px*position[0].toFixed(2))
        let b = r - (rgbMax[2]/px) * (px*position[0].toFixed(2))
        let a = rgba[3]?rgba[3]:1
        // console.log('rgb:', r, g, b)
        r = r<=0?0:r
        r = r>=255?255:r
        g = g<=0?0:g
        g = g>=255?255:g
        b = b<=0?0:b
        b = b>=255?255:b
        setRgba([r,g,b,a])
    }, [position, px, rgbMax])
    useEffect(()=>{
        // console.log(rgba)
        let rgbaStr = ''
        rgbaStr = `rgba(${rgba[0]},${rgba[1]},${rgba[2]})`
        setHex(colorHex(rgbaStr))
    }, [rgba])
    useEffect(()=>{
        if(picker.current){
            // 初始化画布的颜色
            let p = picker.current.getContext('2d')
            let pData = p.getImageData(0, 0, px, px)
            // console.log(pData.data.length)
            let r = rgbMax[0], g = rgbMax[1], b = rgbMax[2], a = 255
            // console.log(r, g, b)
            // 颜色面板
            let i = 0
            for (let idx = 0; idx < pData.data.length; idx++) {
                // if(idx<254) continue
                // if((idx+2)%px === 0) continue
                
                g = g - (rgbMax[1]/px)
                b = b - (rgbMax[2]/px)
                // console.log((idx + 1) % 10200)
                if((idx + 1) % (px) === 0){
                    // 每行的最后一个像素
                    if(r > 0) r -= (rgbMax[0]/px)
                    g = r
                    b = r
                }
                if(g <= 0) g = 0
                if(b <= 0) b = 0
                pData.data[0 + i] = r
                pData.data[1 + i] = g
                pData.data[2 + i] = b
                pData.data[3 + i] = a
            }
            // p.clearRect(0,0,p.width,p.height);
            // console.log(pData.data)
            p.putImageData(pData, 0, 0)
            i+=4
        }
    },[picker, px, rgbMax])
    return <div className="color-picker">
        <div className='color-picker-top'>
                <div className='color-picker-top-hex color-picker-top-hex'>
                    <span>Hex</span>
                    <span>{hex}</span>
                </div>
                <div className='color-picker-top-r color-picker-top-rgba'>
                    <span>Red</span>
                    <span>{Math.round(rgba[0])}</span>
                </div>
                <div className='color-picker-top-g color-picker-top-rgba'>
                    <span>Green</span>
                    <span>{Math.round(rgba[1])}</span>
                </div>
                <div className='color-picker-top-b color-picker-top-rgba'>
                    <span>Blue</span>
                    <span>{Math.round(rgba[2])}</span>
                </div>
                <div className='color-picker-top-a color-picker-top-rgba'>
                    <span>Alpha</span>
                    <span>{rgba[3]}</span>
                </div>
            {/* rgba({Math.round(rgba[0])},{Math.round(rgba[1])},{Math.round(rgba[2])},{Math.round(rgba[3])}) */}
        </div>
        <div className='color-picker-tools'>
            <div className='left'>
                <div className='color' ref={color} onMouseMove={(e)=>{
                    if(cMove){
                        let x = (e.clientX - alpha.current.offsetLeft)/alpha.current.clientWidth
                        setcLeft(x)
                        // console.log(cLeft, x)
                        
                        if(x <= 1/6){
                            //255, 255, 0
                            let g = 255 - 255 * (x/(1/6))
                            console.log(x/(1/6))
                            rgbMax[1] = g
                            setRgbMax([...rgbMax])
                            //255, 0, 153
                            return
                        }
                        if(x<=1/6*2){
                            //50, 0, 255

                            setRgbMax([...rgbMax])
                            return 
                        }
                        if(x<=0/6*3){
                            //0, 102, 255
                            setRgbMax([...rgbMax])
                            return 
                        }
                        if(x<=1/6*4){
                            //0, 255, 253
                            setRgbMax([...rgbMax])
                            return 
                        }
                        if(x<=1/6*5){
                            //0, 255, 102
                            setRgbMax([...rgbMax])
                            return 
                        }
                        if(x<=1){
                            //53, 255, 0
                            setRgbMax([...rgbMax])
                            return 
                        }
                    }  
                }}>
                    <div className='color-flag' style={{
                        left:`${cLeft*100 > 96 ? 96 : cLeft*100<0?0:cLeft*100}%`
                    }} onMouseDown={(e)=>{
                        // e.stopPropagation()
                        setCmove(true)
                    }}>=</div>
                </div>
                <div className='alpha' ref={alpha}  style={{background: `linear-gradient(to right, transparent, rgba(${rgba[0]},${rgba[1]},${rgba[2]})`}}
                    onMouseMove={(e)=>{
                        // e.stopPropagation()
                        // console.log((e.clientX - alpha.current.offsetLeft)/alpha.current.clientWidth)
                        if(aMove){
                            let x = (e.clientX - alpha.current.offsetLeft)/alpha.current.clientWidth
                            rgba[3] = x.toFixed(2)
                            rgba[3] = rgba[3] <= 0 ? 0 : rgba[3]
                            rgba[3] = parseInt(rgba[3])  === 1 ? 1 : rgba[3]
                            // console.log(rgba[3])
                            setRgba([...rgba])
                        }
                    }}>
                    <div className='alpha-flag' style={{
                        left:`${rgba[3]*100 > 96 ? 96 : rgba[3]*100}%`
                    }} onMouseDown={(e)=>{
                        // e.stopPropagation()
                        setAmove(true)
                    }}>=</div>
                </div>
            </div>
            <div className='right'>
                <div 
                    className='color-picker-top-color' 
                >
                    <div className='color-picker-top-color-rgba' style={{backgroundColor:`rgba(${rgba[0]},${rgba[1]},${rgba[2]},${rgba[3]})`}}></div>
                </div>
            </div>

        </div>
        <div className='color-picker-bottom'>
            <div className='color-picker-left'
                style={{
                    cursor: move?'pointer':''
                }}
                onMouseDown={(e)=>{
                    // console.log(e)
                    setMove(true)
                    // console.log(e.nativeEvent.offsetX, e.nativeEvent.offsetY)
                }} 
                onMouseMove={(e)=>{
                    e.stopPropagation()
                    if(move){
                        // console.log(e.nativeEvent.offsetX, picker.current.clientWidth)
                        // console.log(e.nativeEvent.offsetX/picker.current.clientWidth)
                        let x = e.nativeEvent.offsetX/picker.current.clientWidth
                        let y = e.nativeEvent.offsetY/picker.current.clientHeight
                        if(x*100<=0){
                            x=0
                        }
                        if(x*100>=100){
                            x=1
                        }
                        if(y*100<=0){
                            y=0
                        }
                        if(y*100>=100){
                            y=1
                        }
                        setPosition([
                            x,y
                        ])
                    }
                }} 
                onMouseUp={(e)=>{
                    setMove(false)
                    // console.log(e.nativeEvent.offsetX, e.nativeEvent.offsetY)
                    let x = e.nativeEvent.offsetX/picker.current.clientWidth
                    let y = e.nativeEvent.offsetY/picker.current.clientHeight
                    if(x*100<=0){
                        x=0
                    }
                    if(x*100>=100){
                        x=1
                    }
                    if(y*100<=0){
                        y=0
                    }
                    if(y*100>=100){
                        y=1
                    }
                    setPosition([
                        x,y
                    ])
                    
                }}
                onMouseLeave={(e)=>{
                    if(move){
                        let x = e.nativeEvent.offsetX/picker.current.clientWidth
                        let y = e.nativeEvent.offsetY/picker.current.clientHeight
                        if(x*100<=0){
                            x=0
                        }
                        if(x*100>=100){
                            x=1
                        }
                        if(y*100<=0){
                            y=0
                        }
                        if(y*100>=100){
                            y=1
                        }
                        setPosition([
                            x,y
                        ])
                    }
                    // setMove(false)
                }}
            >
                
                <div className='color-picker-slider' style={{
                    left: `${position[0]*100-1.5}%`,
                    top: `${position[1]*100-3}%`,
                    transition: move?'':'all ease 0.1s',
                    boxShadow: `0px 0px 15px rgb(${255 - rgba[0]}, ${255 - rgba[1]}, ${255 - rgba[2]})`,
                    border:`1px solid rgb(${255 - rgba[0]}, ${255 - rgba[1]}, ${255 - rgba[2]})`
                }}></div>
                <canvas 
                    ref={picker} 
                    id="color-picker-cvs-picker" 
                    className='color-picker-cvs-picker' 
                    width={px} 
                    height={px}
                >
                </canvas>
            </div>
        </div>
    </div>
}
 
export default ColorPicker